<template>
  <div v-for="item in data" :key="item">
    <!-- <router-link
      class="wrap"
      :to="{ 
        name: 'UserCourse',
        params: { courseId: item.courseId },
      }"
    > -->
    <div class="wrap" @click="goUserCourse(item.courseId)">
      <div class="image">
        <img :src="item.courseImg" />
      </div>
      <div class="text">
        <div class="title">{{ item.courseName }}</div>
        <div class="teacher">讲师：{{ item.teacher }}</div>
      </div>
      <van-icon
        class="right-arrow"
        name="arrow"
        color="#87d4eb"
        @click="handleChange"
      />
    </div>
    <!-- </router-link> -->
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'
import { Dialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter(),
      route = useRoute()
    const goUserCourse = (val) => {
      if(window.sessionStorage.getItem('token')){
        router.push({
          name: 'UserCourse',
          params: { courseId: val },
        })
      }
      else {
        Dialog.alert({
          title: '提示',
          message: '请登录查看更多精彩课程',
        }).then(() => {
          // on close
        })
      }
    }
    return {
      goUserCourse
    }
  },
  components:{
    [Dialog.Component.name]: Dialog.Component,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 10px;
  display: flex;
  .image {
    padding-right: 10px;
    img {
      width: 90px;
    }
  }
  .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
    }
  }
}
</style>
